<template>
  <div id="app">
    <keep-alive>
      
      <!-- <transition name="fade" mode="out-in"> -->
        <router-view v-if="$route.meta.keep" />
      <!-- </transition> -->
    </keep-alive>
    <!-- <transition name="fade" mode="out-in"> -->
      <router-view v-if="!$route.meta.keep" />
    <!-- </transition> -->
  </div>
</template>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.xl-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.text-center {
  text-align: center;
}

.fade-enter {
  opacity:0;
}
.fade-enter-active{
  transition:opacity .8s;
}


.fade-leave{
  opacity:1;
}
.fade-leave-active{
  opacity:0;
  transition:opacity .8s;
}


</style>
